<template>
  <div class="app-container">
    <Search :crud="crud">
      <el-form-item label="菜单名称">
          <el-input v-model="query.blurry" placeholder="输入菜单名称" />
        </el-form-item>
      </Search>
    <!--主表格-->
    <!--表单-->
    
    <!-- <Selector v-model="showSelect" sign="role" :params="{a:1}" @selectData="selectData" /> -->
    
    <el-card>
      <div class="head-container">
        <crudOperation :permission="permission">
            <template slot="right">
                <el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus" @click="crud.toAdd">新建</el-button>
            </template>
        </crudOperation>
      </div>
      <el-table
      ref="rtable"
      v-loading="crud.loading"
      border
      :data="crud.data"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      row-key="id"
      @select="crud.selectChange"
      @select-all="crud.selectAllChange"
      @selection-change="crud.selectionChangeHandler"
    >
      <el-table-column
        v-for="(item, index) in columnList"
        :key="index"
        show-overflow-tooltip
        :label="item.label"
        :prop="item.prop"
        :width="item.width"
        align="center"
      >
        <template slot-scope="scope">
          <svg-icon v-if="item.prop === 'icon'" :icon-class="scope.row.icon" class="svg-icon" />
          <span v-else-if="item.prop === 'type'">
            <span>{{ dict.label.MENU_TYPE[scope.row.type] }}</span>
          </span>
          <span v-else-if="item.prop === 'hidden'">
            <span v-if="scope.row.hidden">否</span>
            <span v-else>是</span>
          </span>
          <span v-else-if="item.prop == 'time'">
            {{ parseTime(scope.row.time) }}
          </span>
          <span v-else>{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="130px"
        align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          <udOperation :data="scope.row" :permission="permission" msg="确定删除吗,如果存在下级节点则一并删除，此操作不能撤销！" />
        </template>
      </el-table-column>
    </el-table>
    </el-card>

    <!--表单渲染-->
    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :before-close="crud.cancelCU"
      :visible.sync="crud.status.cu > 0"
      :title="crud.status.title"
      width="580px"
    >
      <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
        <el-form-item label="菜单类型" prop="type">
          <el-select v-model="form.type" style="width: 450px;">
            <el-option
              v-for="item in dict.MENU_TYPE"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-show="form.type != 2" label="菜单图标" prop="icon">
          <el-popover placement="bottom-start" width="450" trigger="click" @show="$refs['iconSelect'].reset()">
            <IconSelect ref="iconSelect" @selected="selected" />
            <el-input slot="reference" v-model="form.icon" style="width: 450px;" placeholder="点击选择图标" readonly>
              <svg-icon
                v-if="form.icon"
                slot="prefix"
                :icon-class="form.icon"
                class="el-input__icon"
                style="height: 32px;width: 16px;"
              />
              <i v-else slot="prefix" class="el-icon-search el-input__icon" />
            </el-input>
          </el-popover>
        </el-form-item>
        <el-form-item v-show="form.type != 2" label="外链菜单" prop="iframe">
          <el-radio-group v-model="form.iframe" size="mini">
            <el-radio-button label="true">是</el-radio-button>
            <el-radio-button label="false">否</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-show="form.type == 1" label="菜单缓存" prop="cache">
          <el-radio-group v-model="form.cache" size="mini">
            <el-radio-button label="true">是</el-radio-button>
            <el-radio-button label="false">否</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-show="form.type != 2" label="菜单可见" prop="hidden">
          <el-radio-group v-model="form.hidden" size="mini">
            <el-radio-button label="false">是</el-radio-button>
            <el-radio-button label="true">否</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-show="form.type != 2" label="菜单标题" prop="name">
          <el-input v-model="form.name" :style=" form.type == 0 ? 'width: 450px' : 'width: 178px'" placeholder="菜单标题" />
        </el-form-item>
        <el-form-item v-show="form.type ==2" label="按钮名称" prop="name">
          <el-input v-model="form.name" placeholder="按钮名称" style="width: 178px;" />
        </el-form-item>
        <el-form-item v-show="form.type != 0" label="权限标识" prop="permission">
          <el-input v-model="form.permission" :disabled="form.iframe" placeholder="权限标识" style="width: 178px;" />
        </el-form-item>
        <el-form-item v-if="form.type != 2" label="路由地址" prop="path">
          <el-input v-model="form.path" placeholder="路由地址" style="width: 178px;" />
        </el-form-item>
        <el-form-item label="菜单排序" prop="sort">
          <el-input-number
            v-model.number="form.sort"
            :min="0"
            :max="999"
            controls-position="right"
            style="width: 178px;"
          />
        </el-form-item>
        <el-form-item v-if="!form.iframe && form.type == 1" label="组件名称" prop="componentName">
          <el-input v-model="form.componentName" style="width: 178px;" placeholder="匹配组件内Name字段" />
        </el-form-item>
        <el-form-item v-if="!form.iframe && form.type == 1" label="组件路径" prop="component">
          <el-input v-model="form.component" style="width: 178px;" placeholder="组件路径" />
        </el-form-item>
        <el-form-item label="上级类目" prop="pid">
          <treeselect v-model="form.pid" :options="menus" style="width: 450px;" placeholder="选择上级类目" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="crud.cancelCU">取消</el-button>
        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
      </div>
    </el-dialog>
  
  </div>
</template>

<script>
import crudMenu from '@/api/system/menu'
import Search from '@/components/Search'
import IconSelect from '@/components/IconSelect'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import CRUD, {
  presenter,
  header,
  form,
  crud
} from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'

// crud交由presenter持有
const defaultCrud = CRUD({
  title: '菜单',
  url: 'menus',
  crudMethod: {
    ...crudMenu
  }
})
const defaultForm = {
  id: null,
  name: null,
  sort: 999,
  path: null,
  component: null,
  componentName: null,
  iframe: false,
  roles: [],
  pid: 0,
  icon: null,
  cache: false,
  hidden: false,
  permission: null,
  systemType: []
}

var checkfile = (rule, value, callback) => {
  if (value.length !== 3) {
    if (value.length == 0) {
      callback(new Error('请上传图片'))
    } else {
      callback(new Error('请上传三张图片'))
    }
  } else {
    callback()
  }
}
export default {
  name: 'Menu',
  components: {
    Treeselect,
    IconSelect,
    Search,
    crudOperation,
    rrOperation,
    udOperation
  },
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  data() {
    return {
      columnList: [
        { prop: 'name', label: '菜单名称' },
        { prop: 'icon', label: '图标' },
        { prop: 'type', label: '类型' },
        { prop: 'sort', label: '排序' },
        { prop: 'hidden', label: '可见' },
        { prop: 'createdAt', label: '创建日期', width: '200' }
      ],
      showDiaolog: false, // 弹窗
      showSelect: false,
      // 弹窗按钮
      toolbar: [
        {
          text: '取消',
          type: 'plain',
          func: (done) => {
            done()
          }
        }, {
          text: '确认',
          func: (done) => {
            this.addForm()
          },
          loading: false
        }, {
          text: '设置表单状态',
          func: (done) => {
            this.setForm()
          },
          loading: false
        }, {
          text: '设置表单校验',
          func: (done) => {
            this.setRule()
          },
          loading: false
        }
      ],
      // 表单变量
      formData: {
        test1: '',
        test2: '',
        test3: '',
        test4: '',
        test5: '',
        test6: '',
        test7: '',
        test8: '',
        test9: '',
        test10: '',
        test11: '',
        test12: '',
        test13: ''
      },
      // 表单配置
      formList: [
        { prop: 'test1', label: '测试普通输入框', longLabel: true, disabled: false },
        { prop: 'test2', label: '测试普通输入框2', longLabel: true },
        { prop: 'test3', label: '测试下拉1', type: 'select', list: [{ label: '男', value: 0 }, { label: '女', value: 1 }] },
        { prop: 'test4', label: '测试下拉2', type: 'select', list: [{ label: '男', value: 0 }, { label: '女', value: 1 }] },
        { prop: 'test5', label: '测试文本框1', type: 'textarea' },
        { prop: 'test6', label: '测试文本框2', type: 'textarea' },
        { prop: 'test7', label: '测试时间1', type: 'date' },
        { prop: 'test8', label: '测试时间2', type: 'date' },
        { prop: 'test9', label: '测试选择器1', type: 'inputSearch', func: () => { console.log('点击了') } },
        { prop: 'test10', label: '测试选择器2', type: 'inputSearch', func: () => { console.log('点击了') } },
        { prop: 'test11', label: '测试radio1', type: 'radio', list: [{ label: '男', value: 0 }, { label: '女', value: 1 }] },
        { prop: 'test12', label: '测试radio2', type: 'radio', list: [{ label: '男', value: 0 }, { label: '女', value: 1 }] },
        { prop: 'test13', label: '测试文件上传', type: 'file', fileProp: { listType: 'picture-card', tip: '只能上传图片', limit: 2, accept: ['png', 'jpg'] }, longLabel: true }
      ],
      // 表单校验
      formRules: {
        test1: [
          { required: true, message: '请输入测试', trigger: 'change' }
        ],
        test3: [
          { required: true, message: '请选择下拉1', trigger: 'change' }
        ],
        test13: [
          { required: true, message: '请上传图片', trigger: 'change' },
          { validator: checkfile, trigger: 'change' }
        ]
      },
      menus: [],
      permission: {
        add: ['menu:add'],
        edit: ['menu:edit'],
        del: ['menu:del']
      },
      optShow: {
        add: true,
        edit: false,
        del: false,
        download: false,
        downloadSelect: false
      },
      rules: {
        name: [{
          required: true,
          message: '请输入名称',
          trigger: 'blur'
        }],
        path: [{
          required: true,
          message: '请输入地址',
          trigger: 'blur'
        }],
        systemType: [{
          required: true,
          message: '请勾选所属系统',
          trigger: 'blur'
        }],
        componentName: [{
          required: true,
          message: '请输入路由名称',
          trigger: 'blur'
        }],
        component: [{
          required: true,
          message: '请输入组件路径',
          trigger: 'blur'
        }]
      },
      selectArr: []
    }
  },
  dicts: ['MENU_TYPE'],
  methods: {
    [CRUD.HOOK.beforeToCU]() {
      this.getMenusTreeBySystem()
    },
    // 选中图标
    selected(name) {
      this.form.icon = name
    },
    getMenusTreeBySystem() {
      // 获取没有按钮的树
      crudMenu.getMenusTree({
        type: 'menu'
      }).then(res => {
        this.menus = []
        const menu = {
          id: 0,
          label: '顶级类目',
          children: []
        }
        menu.children = res
        this.menus.push(menu)
      })
    },
    systemChange() {
      this.form.pid = 0
      this.getMenusTreeBySystem()
    },
    openDialog() {
      this.showDiaolog = true
    },
    addForm() {
      this.$refs.testForm.$refs.aForm.validate(valid => {

      })
    },
    setForm() {
      this.setFormItem(this.formList, 'test1').then(item => {
        item.disabled = true
      })
    },
    setRule() {
      this.setRuleItem(this.formRules, 'test3').then(item => {
        item[0].required = false
      })
    },
    openSelect() {
      this.showSelect = true
    },
    selectData(val) {
      console.log('选择的数据', val)
    }
  }
}

</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .el-input-number .el-input__inner {
    text-align: left;
  }
.svg-icon{
  filter: drop-shadow(black 0 0) !important;
}
</style>
